.btn {
    font-weight: 400;
    border-radius: $btn-border-radius;
    cursor: pointer;
    outline: 0 !important;
    align-items: center;
    display: flex;
    flex-direction: row;
    &:focus{
        box-shadow: none;
    }
}

.btn-link {
    color: $text-color;
    align-items: center;

    &.active {
        box-shadow: none;
    }
}

.btn-default {
  @include button-variant($text-color, $btn-default-bg, $btn-default-border);
  background-color: #fff;
  border-bottom-color: darken($btn-default-border, 2%);
  @include box-shadow(0 1px 1px rgba(90, 90, 90, 0.1));
  &.btn-bg {
    border-color: rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
  }
}

.btn-primary {
  @include button-variant($white, $primary, $primary);
}

.btn-success {
  @include button-variant($white, $success, $success);
}

.btn-info {
  @include button-variant($white, $info, $info);
  @at-root label#{&} {
	margin-bottom: 0px;
  }
}

.btn-warning {
  @include button-variant($black, $warning, $warning);
}

.btn-danger {
  @include button-variant($white, $danger, $danger);
}

.btn-dark {
  @include button-variant($white, $dark, $dark);
}

.btn-black {
  @include button-variant($white, $black, $black);
}

.btn-icon {
  padding: 0 !important;
  text-align: center;
  width: 34px;
  height: 34px;
  i {
    top: -1px;
    position: relative;
    line-height: 34px;
  }
  &.btn-sm {
    width: 30px;
    height: 30px;
    i {
      line-height: 30px;
    }
  }
  &.btn-lg {
    width: 45px;
    height: 45px;
    i {
      line-height: 45px;
    }
  }
}

.btn-rounded {
  border-radius: 50px;
  padding-left: 15px;
  padding-right: 15px;
  &.btn-lg {
    padding-left: 25px;
    padding-right: 25px;
  }
}

.btn {
  > i {
    &.pull-left,
    &.pull-right {
      line-height: $line-height-base;
    }
  }
}

.btn-block {
    padding-left: 12px;
    padding-right: 12px;
    justify-content: center;
    width: 100%;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: $border-radius-base;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: $border-radius-base;
}

.btn-addon {
  i {
    margin: -7px -12px;
    margin-right: 12px;
    background-color: rgba(0, 0, 0, 0.1);
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    float: left;
    position: relative;
    border-radius: $btn-border-radius 0 0 $btn-border-radius;
    &.pull-right {
      margin-right: -12px;
      margin-left: 12px;
      border-radius: 0 $btn-border-radius $btn-border-radius 0;
    }
  }
  &.btn-sm {
    i {
      margin: -6px -10px;
      margin-right: 10px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      &.pull-right {
        margin-right: -10px;
        margin-left: 10px;
      }
    }
  }
  &.btn-lg {
    i {
      margin: -11px -16px;
      margin-right: 16px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      &.pull-right {
        margin-right: -16px;
        margin-left: 16px;
      }
    }
  }
  &.btn-default {
    i {
      background-color: transparent;
      border-right: 1px solid $border-color;
    }
  }
}

.btn-groups .btn {
  margin-bottom: 5px;
}

button.close {
  font-size: 12px;
}

.btn-group-justified {
  display: flex;
  width: 100%;
  .btn,
  .btn-group {
    flex: 1;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}


.btn-loading {
    position: relative;

    .spinner-loading {
        background: inherit;
        @extend .w-100;
        @extend .h-100;
        @extend .d-flex;
        @extend .align-items-center;
        @extend .justify-content-center;
    }

    span:not(.spinner-loading):not(.spinner-border) {
        opacity: 0;
    }

    svg:not(.spinner-loading) {
        opacity: 0;
    }
}
